﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MapBD.aspx.cs" Inherits="Map_MapBD" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title></title>

    <style type="text/css">  
         html{height:100%}   body{height:100%;margin:0px;padding:0px}   #container{height:100%}   
    </style>
    
    <link href="CSS/MapPop.css" rel="stylesheet" type="text/css" />
    <script src="../Resources/Scripts/jQuery/jquery-1.7.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>
   <%-- <script type="text/javascript" src="http://api.map.baidu.com/library/GeoUtils/1.2/src/GeoUtils_min.js"></script>--%>
    <script src="MaskLayer.js" type="text/javascript"></script>
    <%--<script type="text/javascript" src="markerclusterer.js"></script>--%>

    
    <script type="text/javascript">
        $(function () {

            createMapPro();
            //加载权限列表
            $.post("MapHelper.ashx", { "action": "GetCityName" }, function (data, status) {
                if (data == "err") {
                    alert("加载错误");
                }
                else {
                    var city = $.parseJSON(data);
                    //$("#city").empty();
                    for (var i = 0; i < city.length; i++) {
                        var option = "<option value=" + city[i].OrganID + " >--" + city[i].Name + "--</option>";
                        $("#select").append(option);
                    }
                    // alert(city[0].OrganID);
                }

            });

            //加载不同权限的地图
            $("#select").change(function () {
                var name = $("#select").find("option:selected").text();
                name = name.replace("--", "");
                name = name.replace("--", "");

                var value = $("#select").val();
                if (value.length == 2) {
                    createMapPro();//省市级权限不加载数据
                    //loadDataTerminalOfCounty(escape(name), value);
                }
                else if (value.length == 4) {
                    createMap(12, name); //省市级权限不加载数据
                }
                else if (value.length == 6) {
                    createMap(12, name);
                    loadDataTerminalOfCounty(escape(name), value); //县级权限加载数据
                    map.addEventListener("tilesloaded", addMymarkers);
                    map.addEventListener("zoomend", addMymarkers);
                    map.addEventListener("moveend", addMymarkers);
                }
                else {
                    alert("权限错误");//其它权限不做处理
                    return;
                }

            });


             //点击终端 发送信息
            $("#send").click(function () {
                var equipNo=$("#equipNo").val();
                var phone = $("#phoneHidden").val();
                var msg = $("#sendMsg").val();
                var sendTimes = $("#sendTimes").val();
                var tMsg=sendTimes+msg;
                if (msg == "" || msg.length < 3) {
                    alert("发送内容不能为空或太短");
                    return;
                }
                $.post("MapHelper.ashx", { "action": "sendMsg", "phone": phone, "sendMsg": tMsg, "equipNo": equipNo }, function (data, status) {
                    if (status == "success") {
                        if (data == "ok") {
                            alert("信息已经发出！");
                        }
                    }
                });
            });
   

    })
       //=====================================
        //创建地图函数开始 处理省比较特殊（暂时没有找到处理这个bug的方法）
        function createMapPro() {
            var map1 = new BMap.Map("container");
            window.map1 = map1;
            map1.centerAndZoom(new BMap.Point(113.837612, 34.028415), 8);
            map1.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_SMALL }));
            map1.enableScrollWheelZoom();
            getBoundary();
            
        }
       
        //因为有点小bug 对创建省的边界做特殊处理 开始
        function getBoundary() {
            var bdary = new BMap.Boundary();
            var name = "河南省";
            bdary.get(name, function (rs) {       //获取行政区域
                map1.clearOverlays();        //清除地图覆盖物       
                var count = rs.boundaries.length; //行政区域的点有多少个
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
                    ply.setFillColor();
                    map1.addOverlay(ply);  //添加覆盖物
                    //map.setViewport(ply.getPath());    //调整视野         
                }
            });
        }

        //创建地图函数开始 处理市 县
        function createMap(num, name) {
            var map = new BMap.Map("container");
            window.map = map;
            map.centerAndZoom(new BMap.Point(113.837612, 34.028415), num);
            map.addControl(new BMap.NavigationControl({ type: BMAP_NAVIGATION_CONTROL_SMALL }));
            map.enableScrollWheelZoom();
            getBoundaryCity(name);
        }
       
        //处理市和县的边界 开始
        function getBoundaryCity(name) {
            var bdary = new BMap.Boundary();
            
            bdary.get(name, function (rs) {       //获取行政区域
                map.clearOverlays();        //清除地图覆盖物       
                var count = rs.boundaries.length; //行政区域的点有多少个
                for (var i = 0; i < count; i++) {
                    var ply = new BMap.Polygon(rs.boundaries[i], { strokeWeight: 2, strokeColor: "#ff0000" }); //建立多边形覆盖物
                    ply.setFillColor();
                    map.addOverlay(ply);  //添加覆盖物
                    map.setViewport(ply.getPath());    //调整视野         
                }
            });
        }

        //获取一个县的所有终端数据 CCName：城市（县)名称   value：名称对应的值
        function loadDataTerminalOfCounty(CCName,value) {

            $.post("MapHelper.ashx", { "action": "GetMapData", "name": CCName, "value": value }, function (data, status) {
                if (status == "success") {
                    if (data != "err") {
                        var terminal = $.parseJSON(data);
                        window.terminal = terminal;
                        for (var i = 0; i < terminal.length; i++) {
                            var lng = terminal[i].Lng;
                            var lat = terminal[i].Lat;
                            //var vName = terminal[i].Village;
                            var point = new BMap.Point(lng, lat);
                            addMarkerTerminal(point, i);
                        }
                        //alert(terminal[0].Lng+"--"+terminal[0].Lat);
                    }
                    else {
                        alert("没有该权限下的数据");
                    }
                }
                else {
                    alert("数据加载失败");
                }
            });
          
        }


        var markers=[];//设置一个全局的变量数据存放终端

        //添加终端的标注和事件
        function addMarkerTerminal(point, index) {
            var img = "";
            if (terminal[index].Online == "1" ) {  
                img = "images/icon2.gif";  
            } else if (terminal[index].Online == "0") {
                img = "images/icon3.gif";
            }
           // alert(img);
            var myIcon = new BMap.Icon(img, new BMap.Size(20, 31),
                                {
                                    anchor: new BMap.Size(10, 31), //标注的偏移，让标注点的下端指向经纬度坐标
                                    infoWindowAnchor: new BMap.Size(10, 0) //信息框的偏移  让信息框的下断点指向标注的上端
                                }
             );
            var marker = new BMap.Marker(point, { icon: myIcon });
            map.addOverlay(marker);

            //给标注添加鼠标滑过事件
            marker.addEventListener("mouseover", function () {
                //alert(mapDataArray[0]);
                var infoWindow = new BMap.InfoWindow();
                var detailInfow = '<div>所在地：' + terminal[index].Village + '<br/>终端号码：' + terminal[index].SimNo + '</div>';
                infoWindow.setContent(detailInfow);
                this.openInfoWindow(infoWindow, map.getCenter());
            });

            marker.addEventListener("click", function () {
                // 弹出遮罩层的信息发送框
                var eNo=terminal[index].ENo;
                $("#equipNo").val(eNo);
                var phone = terminal[index].SimNo;
                $("#phoneHidden").val(phone);
                var villageName = terminal[index].Village;
                $("#villageName").val(villageName);
                ShowDiv('MyDiv', 'fade');
                        });
          markers.push(marker);
        }

        //在可视区域内加载标注
        function addMymarkers() {

            for (i = 0; i < markers.length; i++) {
                var result = BMapLib.GeoUtils.isPointInRect(markers[i].getPosition(), map.getBounds());
                if (result == true) {
                    map.addOverlay(markers[i]);
                } else {
                    map.removeOverlay(markers[i]);
                }
            }

        }

       
       
    </script>
</head>
<body  >
    <div  >
        <select id="select">
            <option value="0">--请选择--</option>
            
        </select>
        <%=ZASession.Account %>
    </div>
    <div id="container"></div> 
        <%--弹出遮罩层和发送信息框 开始--%>
 <div id="fade" class="black_overlay">
 </div>
<div id="MyDiv" class="white_content" >
  <%--      <div style="text-align: right; cursor: default; height: 40px;">
           <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>--%>
         <table width="448" border="0" cellspacing="0" cellpadding="0" align="center" class="bg" >
            <tr>
                <td height="40" class="tpt">
                    <img src="images/tpt.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="25" align="center">
                    <img src="images/tline.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    村名：<input name="村名" id="villageName" type="text" class="bor" style="width: 335px;" />
                </td>
            </tr>
            <tr>
                <td class="nr">
                    发送内容：<span style="font-size: 12px; color: #FF0000">（字数不超过350个)</span><br />
                    <textarea  id="sendMsg" name="textarea" rows="" cols="" class="bor2" ></textarea>
                   
                </td>
            </tr>
            <tr> 
                <td class="nr">
                    发送次数：<input id="sendTimes" name="sendTimes" type="text" size="3" value="3" class="bor" />次
                </td>
            </tr>
            <tr>
                <td height="60" align="center">
                    <img src="images/tqx.gif" alt="" onclick="CloseDiv('MyDiv','fade')" />&nbsp;&nbsp;&nbsp;&nbsp;<img id="send" src="images/tfs.gif" alt="" />
                </td>
            </tr>
            <tr>
                <td height="20">
                </td>
            </tr>
        </table>
       <input type="hidden" id="phoneHidden" /><input type="hidden" id="equipNo" />
        
 </div>
 <%--弹出遮罩层和发送信息框 结束--%>
</body>
</html>
